<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/course.css" />
  </head>
  <body>
    <div class="Box">
      <div class="top">
        <div class="head">
          <a href="javascript:;" class="jump"></a>
          <div class="serach">
            <div class="left">课程</div>
            <div class="right">
              <input type="text" placeholder="搜索课程、机构" />
            </div>
          </div>
        </div>
        <div class="nav">
          <ul class="nav-box">
            <li><div>位置</div></li>
            <li><div>艺术</div></li>
            <li><div>智能排序</div></li>
            <li><div>筛选</div></li>
          </ul>
        </div>
      </div>

      <div class="center">
        <!-- <div class="item">
                <div class="photo"><img src="img/1_tpl_00.jpg" alt=""></div>
                <div class="title">
                    <h1>啦啦操培训班4</h1>
                    <p class="area">佳艺教育(清华大学)</p>
                    <p class="time">2016-11-18至2017-08-09</p>
                    <p class="price">
                        <em>团报价</em>
                        ¥<span>0</span> <i>¥0</i>
                    </p>
                    <div class="people">
                        <div>已报<span>56</span>/90人</div>
                        <div>海淀区</div>
                    </div>
                    <div class="end">
                        <div>随时退班</div>
                        <div>随时插班</div>
                        <div>免费试听</div>
                    </div>
                </div>
            </div> -->
        <!--  <div class="item">
                <div class="photo"><img src="img/1_tpl_00.jpg" alt=""></div>
                <div class="title">
                    <h1>啦啦操培训班4</h1>
                    <p class="area">佳艺教育(清华大学)</p>
                    <p class="time">2016-11-18至2017-08-09</p>
                    <p class="price">
                        <em>团报价</em>
                        ¥<span>0</span> <i>¥0</i>
                    </p>
                    <div class="people">
                        <div>已报<span>56</span>/90人</div>
                        <div>海淀区</div>
                    </div>
                    <div class="end">
                        <div>随时退班</div>
                        <div>随时退班</div>
                        <div>随时退班</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="photo"><img src="img/1_tpl_00.jpg" alt=""></div>
                <div class="title">
                    <h1>啦啦操培训班4</h1>
                    <p class="area">佳艺教育(清华大学)</p>
                    <p class="time">2016-11-18至2017-08-09</p>
                    <p class="price">
                        <em>团报价</em>
                        ¥<span>0</span> <i>¥0</i>
                    </p>
                    <div class="people">
                        <div>已报<span>56</span>/90人</div>
                        <div>海淀区</div>
                    </div>
                    <div class="end">
                        <div>随时退班</div>
                        <div>随时退班</div>
                        <div>随时退班</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="photo"><img src="img/1_tpl_00.jpg" alt=""></div>
                <div class="title">
                    <h1>啦啦操培训班4</h1>
                    <p class="area">佳艺教育(清华大学)</p>
                    <p class="time">2016-11-18至2017-08-09</p>
                    <p class="price">
                        <em>团报价</em>
                        ¥<span>0</span> <i>¥0</i>
                    </p>
                    <div class="people">
                        <div>已报<span>56</span>/90人</div>
                        <div>海淀区</div>
                    </div>
                    <div class="end">
                        <div>随时退班</div>
                        <div>随时退班</div>
                        <div>随时退班</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="photo"><img src="img/1_tpl_00.jpg" alt=""></div>
                <div class="title">
                    <h1>啦啦操培训班4</h1>
                    <p class="area">佳艺教育(清华大学)</p>
                    <p class="time">2016-11-18至2017-08-09</p>
                    <p class="price">
                        <em>团报价</em>
                        ¥<span>0</span> <i>¥0</i>
                    </p>
                    <div class="people">
                        <div>已报<span >56</span>/90人</div>
                        <div>海淀区</div>
                    </div>
                    <div class="end">
                        <div>随时退班</div>
                        <div>随时退班</div>
                        <div>随时退班</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="photo"><img src="img/1_tpl_00.jpg" alt=""></div>
                <div class="title">
                    <h1>啦啦操培训班4</h1>
                    <p class="area">佳艺教育(清华大学)</p>
                    <p class="time">2016-11-18至2017-08-09</p>
                    <p class="price">
                        <em>团报价</em>
                        ¥<span>0</span> <i>¥0</i>
                    </p>
                    <div class="people">
                        <div>已报<span>56</span>/90人</div>
                        <div>海淀区</div>
                    </div>
                    <div class="end">
                        <div>随时退班</div>
                        <div>随时退班</div>
                        <div>随时退班</div>
                    </div>
                </div>
            </div>   -->
      </div>
    </div>

    <script src="../js/jquery.min.js"></script>
    <script>
      $(function () {
        $(".head .jump").click(function () {
          location.href = "../index.html";
        });

        async function loadClass() {
          return await $.get("../data/course.json");
        }
        loadClass().then(function (res) {
          console.log(res);
          let course = res.course;
          let item = "", end = "",qq = "";
          for (let i = 0; i < course.length; i++) {
            const cls = course[i];
            item += `<div class="item">
                    <div class="photo"><img src="${cls.photo}" alt=""></div>
                <div class="title">
                    <h1>${cls.name}</h1>
                    <p class="area">${cls.area}</p>
                    <p class="time">${cls.time}</p>
                    <p class="price">
                        <em>团报价</em>
                        ¥<span>${cls.price}</span> <i>¥0</i>
                    </p>
                    <div class="people">
                        <div>已报<span>${cls.people}</span>/90人</div>
                        <div>海淀区</div>
                    </div>
                    <div class="end">
                        ${cls.isshowTui?`<div>随时退班</div>`:''}
                        ${cls.isshowCha? `<div>随时插班</div>`:''}
                        ${cls.isshowFree?`<div>免费试听</div>`:''}
                    </div>
                </div>
            </div>
                    `;
            console.log(qq);
          }
          $(".center").html(item);
          console.log(item);
        });
      });
    </script>
  </body>
</html>
